import gsap from "gsap";

const play = document.querySelector('.play')
const pause = document.querySelector('.pause')
const resume = document.querySelector('.resume')
const restart = document.querySelector('.restart')
const reverse = document.querySelector('.reverse')
const repeat = document.querySelector('.repeat')
const kill = document.querySelector('.kill')
const yoyo = document.querySelector('.yoyo')

const animation = gsap.to('.box', {
    opacity: 1,
    rotation: 360,
    borderRadius: '50%',
    scale: 1.25,
    duration: 2
})

play.addEventListener('click', () => {
    // 动画结束了，再play就无效了
    animation.play()
})
pause.addEventListener('click', () => {
    // 暂停动画
    animation.pause()
})
resume.addEventListener('click', () => {
    // 恢复动画(从暂停继续,如果动画结束，则无效)
    animation.resume()
})
restart.addEventListener('click', () => {
    // 重新开始动画
    animation.restart()
})
reverse.addEventListener('click', () => {
    // 反转动画，如动画从 A -> B，现在到B状态了
    // 则点击反转，动画从 B -> A 播放
    // 再点击反转，动画从 A -> A 播放
    animation.reverse()
})
kill.addEventListener('click', () => {
    // 杀死动画，动画停止，不能再做其他任何操作
    animation.kill()
})
yoyo.addEventListener('click', () => {
    // 注意: yoyo 必须要和 repeat 一起配套使用才有效果
    animation.yoyo(true)
})

repeat.addEventListener('click', () => {
    animation.repeat(2)
})